<template>
  <!-- 
  1.搜索
  2.历史记录存储localStorage
  3.历史记录存储服务器
  中国郑爽大数据云计算Mybatis
  -->
  <div style=" overflow:scroll; width:100%; height:100%;">
    <div class="header_top">
      <div class="w960">
        <span class="time">ES搜索引擎-邮件资源搜索</span>
        <div class="toplinks">
          [&nbsp;
          <a
            href="https://www.elastic.co/guide/cn/elasticsearch/guide/current/index.html"
            target="_blank"
          >ElasticSearch权威指南</a>&nbsp;]
          [&nbsp;
          <a
            href="http://wpa.qq.com/msgrd?v=3&amp;uin=2109258438&amp;site=qq&amp;menu=yes"
            target="_blank"
          >QQ联系我</a>&nbsp;]
        </div>
      </div>
    </div>
    <!-- container -->
    <div class="container">
      <div class="row" style="padding-top: 30px;">
        <div class="col-md-6" align="right">
          <div class="input-group">
            <input
              autocomplete="off"
              type="text"
              value="spring boot视频教程"
              id="q"
              class="form-control"
              placeholder="请输入您想要搜索的资源"
              onkeydown="if(event.keyCode==13) submitData()"
              v-model="search"
            />
            <span class="input-group-addon btn btn-info" id="q" @click="searchEmlPage(search)">搜索一下</span>
          </div>
        </div>
      </div>

      <div style="float:left">
        <div style="padding-top: 5px;">
          <ol class="breadcrumb" style="background-color: white;margin-bottom: 0px;">
            <li>
              <!-- href也可以实现页面的跳转，注意：
              1.<a href="/fronthome/searcheml">首页</a> ：跳转结果：http://localhost:8080/fronthome/searcheml#/【错】显示根路由
              2.<a href="fronthome/searcheml">首页</a>；跳转结果：http://localhost:8080/#/fronthome/searcheml【对】-->
              <span class="glyphicon glyphicon-home"></span>&nbsp;
              <a @click="searchemlvue()">首页</a>
            </li>
            <li class="active">&#39; spring boot视频教程 &#39; - 搜索结果</li>
          </ol>
        </div>
      </div>

      <div class="row" style="padding-top: 10px;">
        <div class="col-md-12">
          <div class="data_list">
            <div class="data_list_title" style>
              <img src="./image/search_icon.png" />
              搜索&nbsp;
              <font color="red">{{search}}</font>&nbsp;的结果 &nbsp;(总共搜索到&nbsp;
              <font
                color="red"
                v-if="resultflag==true"
              >{{emlIndexList.length}}</font>
              <font color="red" v-else-if="resultflag==false">0</font>

              &nbsp;条记录)
            </div>
          </div>
        </div>
      </div>

      <div v-if="resultflag==true">
        <el-card
          :body-style="{ padding: '0px' }"
          v-for="(emlIndex,index) of emlIndexList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          :key="index"
        >
          <div>
            <img src="./image/icon.png" class="image" />
            <span class="CSS5-left">标题:</span>
            <span style="color:#00F;float:left" v-html="emlIndex.subject"></span>
          </div>
          <div style="padding: 3px;">
            <span class="CSS5-left">From(发件人):</span>
            <span style="float:left" v-html="emlIndex.senderName"></span>
            <span class="CSS5-left">To(收件人):</span>
            <span style="float:left" v-html="emlIndex.recipientName"></span>
            <span class="CSS5-left">内容(纯文本)：</span>
            <span style="float:left" v-html="emlIndex.emlContentText"></span>
          </div>
          <div style="padding: 3px;">
            <div class="bottom clearfix">
              <time class="time">发送时间{{ emlIndex.senderDate }}</time>
              <el-button type="text" class="button" @click="emldetail(emlIndex)">查看详情</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <!-- container--end -->
    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[4, 5, 6]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="emlIndexList.length"
    ></el-pagination>
    <el-footer>
      免责申明：本站点是毕业设计演示站点，所有链接资源采集自互联网
      <br />法律声明 阳光准则 网站地图 粤网文【2017】6138-1456号 Copyright © 1998 - 2019 Tencent. All Rights Reserved. ElasticSearch公司 版权所有
    </el-footer>
  </div>
</template>

<script>
import axios from "axios";
import "./javascript/StringUtil.js";
import "./javascript/PromiseUtil.js";
export default {
  data() {
    return {
      search: "",
      emlIndexList: [],
      //分页
      currentPage: 1, //初始页
      pagesize: 4, //    初始每页的数据
      //
      resultflag: true
    };
  },
  computed: {
    //进入的用户
    userSO_json() {
      let userSO_json = JSON.parse(sessionStorage.getItem("userSO_json"));
      return userSO_json;
    }
  },
  created() {
    this.search = this.$route.query.firstSearch;
    this.searchEmlPage(this.search);
  },
  methods: {
    async searchEmlPage(value) {
      if (value != null) {
        this.PromiseUtil.connhistory(value);
        this.StringUtil.appendKeywords(
          JSON.parse(localStorage.getItem("historyItems")),
          value
        );
        axios
          .get("/api/EmlSearchController/" + value+"?userName="+this.userSO_json.userName, {
            headers: {
              //头部信息
              "Content-Type": "application/json;charset=utf-8",
              token: this.userSO_json.token
            }
          })
          .then(response => {
            var obj = response.data.data;
            if (response.data.data != null) {
              this.resultflag = true;
              let list = obj.content;
              this.emlIndexList = JSON.parse(JSON.stringify(list));
              console.log(this.emlIndexList);
              this.$message({
                showClose: true,
                message: "恭喜你，本次全文检索成功",
                type: "success"
              });
            } else if (obj === null) {
              this.resultflag = false;
              this.$message({
                showClose: true,
                message: "对不起，本次全文检索失败，索引库内没有你检索的数据",
                type: "warning"
              });
            }
            console.log(response.data.data);
          })
          .catch(error => {
            this.$message({
              showClose: true,
              message: "后端token过期，请重新登录",
              type: "warning"
            });
          });
      }
    },
    emldetail(passObject) {
      console.log(passObject);
      this.$router.push({
        path: "/backhome/searcheml/searchpage/detail_eml",
        query: {
          emlIndex: passObject
        }
      });
    },
    searchemlvue() {
      this.$router.push({
        path: "/backhome/searcheml"
      });
    },
    //分页
    // 初始每页数据数pagesize
    handleSizeChange(size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    //初始页currentPage
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    }
  }
};
</script>

<style scoped>
/* @import "./css/bootstrap-theme.css";
@import "./css/bootstrap-theme.min.css";
@import "./css/bootstrap.css"; */
@import "./css/bootstrap.min.css";

.pagination {
  margin-top: 40%;
  margin-left: -45%;
  position: fixed;
  bottom: 60px;
}
.el-footer {
  height: 40px;
  width: 100%;
  background-color: #ddd;
  position: fixed;
  bottom: 0;
}
.image {
  width: 50px;
  height: 50px;
  /* width: 100%; */
  display: block;
  float: right;
}
.CSS5-left {
  float: left;
  border: 1px solid #f00;
}
.time {
  font-size: 13px;
  color: #999;
}
</style>

